<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生成表格</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        th{
            float: left;
            width: 50px;
            height: 25px;
            background-color: rgb(0, 217, 255);
            color: white;
            margin-top: 10px;
            margin-left: 30px;
        }
    </style>
</head>
<script src="./jquery-3.2.1.min.js"></script>
<body>
    <input type="button" value="获取数据" id="j_btnGetData" style="height: 30px;">
    <table>
        <thead>
            <tr>
                <th>标题</th>
                <th>地址</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody id="j_tbData">
        </tbody>
    </table>
    <script>
        $(function () {
 	    var data = [{
 	        name: "传智播客",
 	        url: "http://www.itcast.cn",
 	        type: "IT最强培训机构"
 	    }, {
 	        name: "黑马程序员",
 	        url: "http://www.itheima.com",
 	        type: "大学生IT培训机构"
 	    }, {
 	        name: "传智前端学院",
 	        url: "http://web.itcast.cn",
            type: "前端的黄埔军校"
 	    }];
 	    $('#j_btnGetData').click(function () {
 	       var list = [];
 	       for(var i = 0 ; i < data.length; i++){
 	         list.push("<tr>");
 	         for(var key in data[i]){
 	           list.push('<td>');
 	           list.push(data[i][key]);
 	           list.push('</td>');
 	         }
 	         list.push("</tr>");
        }
 	       $('#j_tbData').html(list.join(""));
 	    });
    });
    </script>
</body>
</html>